slider 滑块
更新时间：2023-06-15
slider 滑块
滑块
属性说明：
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| class-name | String | 否 | 无 | 自定义class |
| max | Number | 否 | 100 | 最大值 |
| min | Number | 否 | 0 | 最小值 |
| value | Number | 否 | 0 | 进度条百分比，在progressbar有效 |
| step | Number | 否 | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除 |
| disabled | Boolean | 否 | false | 是否禁用 |
| isPrice | Boolean | 否 | false | 是否为价格选择器，控制显示￥ |
| hideValueTag | Boolean | 否 | false | 是否隐藏滑块上方价格 |
| isShowBoundary | Boolean | 否 | true | 是否展示边界值 |
| noHideBoundary | Boolean | 否 | false | 不隐藏边界值 |
| leftBoundary | string | 否 | '' | 自定义左侧边界值 |
| rightBoundary | string | 否 | '' | 自定义右侧边界值 |
| bindchange | EventHandle | 否 | 无 | 完成一次拖动后触发的事件，event.detail = {value: value} |
| bindchanging | EventHandle | 否 | 无 | 拖动过程中触发的事件，event.detail = {value: value} |
示例：
json:
{
"usingComponents": {
"iov-slider": "iov-ui/lib/slider"
}
}swan:
<view>
<iov-slider
min="0"
max="1500"
value="200"
step="30"
bind:change="sliderChange"
bind:changing="sliderChanging"
disabled="false">
</iov-slider>
</view>
<view>
<iov-slider
min="0"
max="1500"
value="200"
step="30"
valueRight="500"
bothWay="true"
bind:change="sliderChange"
bind:changing="sliderChanging"
bind:changeRight="sliderChangeRight"
disabled="false">
</iov-slider>
</view>js:
Page({
sliderChange: function (e) {
console.log('sliderChange', e);
},
sliderChanging: function (e) {
console.log('sliderChanging', e);
},
sliderChangeRight: function (e) {
console.log('sliderChange', e);
}
});